/**
 * @Author: jipeng.Li
 * @Date: 2020-01-16  10:17:52
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2020-01-16  10:17:52
 * @Description: 司机详情
 */
import React, { Component } from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { avatarCar, empty04 } from '@/images';
import {
  fontColorBlack,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
} from '@/styles';
import {
  XMEmpty
} from '@/common';

export default class VehicleInfo extends Component {
  constructor() {
    super();
    this.state = {
      infoData: {
        vehiclePhoto: '',
        numberPlates: '', // 车牌号
        joinTime: '', // 入住时间
        driveAge: '', // 驾龄
        vehicleModel: '', // 车型
        vehicleLong: '', // 车长
        load: '', // 载重
        ascriptionEnterprise: '', // 所属企业
        cooperateType: '', // 合作类型
        obdStatus: '', // obd信息
        obdInfo: '',
        vehicleEquipment: '' // 车载设备
      },
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { infoData } = params;
    // this.setInfoData(infoData);
    this.setState({ infoData });
  }

  render() {
    const { infoData } = this.state;
    if (!infoData) {
      return <XMEmpty emptyImg={empty04} title='您还没有车辆无法接单' desc='需要等待其他车主为您分配车辆' boxStyle={{ marginTop: px2dp(100) }} />;
    }
    return (
      <SafeAreaView
        style={{
          backgroundColor: mainBgColorLightGray,
          flex: 1
        }}
      >
        <View style={style.vehicleCard}>
          <Image
            style={{
              width: px2dp(120),
              height: px2dp(120),
            }}
            source={infoData.vehiclePhoto || avatarCar}
          />
          <View style={style.vehicleCardText}>
            <Text
              style={{
                color: fontColorBlack,
                fontSize: px2dp(32)
              }}
            >
              {infoData.numberPlates}
            </Text>
            <Text
              style={{
                color: fontColorSecDeepGray,
                fontSize: px2dp(24)
              }}
            >
              {infoData.joinTime ? `${infoData.joinTime} 入驻` : ''}
            </Text>
          </View>
        </View>
        <View>
          <View
            style={{
              marginTop: px2dp(20),
              backgroundColor: mainBgColorWhite,
              paddingHorizontal: px2dp(20)
            }}
          >
            {this._renderRowItem({ title: '车龄', value: infoData.driveAge ? `${infoData.driveAge} 年` : '-' })}
            {this._renderRowItem({ title: '车型', value: infoData.vehicleModel ? infoData.vehicleModel : '-' })}
            {this._renderRowItem({ title: '车长', value: `${infoData.vehicleLong || '-'}` })}
            {this._renderRowItem({ title: '载重', value: infoData.load ? `${infoData.load} 吨` : '-' })}
          </View>
          <View
            style={{
              marginTop: px2dp(20),
              backgroundColor: mainBgColorWhite,
              paddingHorizontal: px2dp(20)
            }}
          >
            {this._renderRowItem({ title: '所属企业', value: infoData.ascriptionEnterprise })}
            {this._renderRowItem({ title: '合作类型', value: infoData.cooperateType })}
            {/* {this._renderRowItem({ title: 'obd设备', value: infoData.obdStatus ? `${infoData.obdStatus === 1 ? '在线' : `离线${infoData.obdInfo}`}` : '-' })} */}
            {/* {this._renderRowItem({ title: '车载设备', value: infoData.vehicleEquipment })} */}
          </View>
        </View>
      </SafeAreaView>
    );
  }

  _renderRowItem = (rowItem = { title: '-', value: '-' }) => {
    const { title, value } = rowItem;
    return (
      <View style={style.rowItem}>
        <Text
          style={{
            color: fontColorSecDeepGray,
            fontSize: px2dp(28),
            marginRight: px2dp(20),
            weight: px2dp(300),
          }}
        >
          {title}
        </Text>
        <Text
          style={{
            color: fontColorBlack,
            fontSize: px2dp(28)
          }}
        >
          {value}
        </Text>
      </View>
    );
  }

  swtichCooperateType=(key) => {
    switch (key) {
    case '1':
      return '自营';
    case '2':
      return '加盟';
    case '3':
      return '挂靠';
    case '4':
      return '社会车辆';
    default:
      return '-';
    }
  }

  setInfoData = (item) => {
    const { infoData } = this.state;
    if (!infoData) {
      this.setState({ infoData: null });
      return;
    }
    let newInfoData = infoData;
    Object.keys(newInfoData).forEach(key => {
      if (item[key]) {
        newInfoData[key] = item[key];
      }
    });
    this.setState({ infoData: newInfoData });
  }
}

const style = StyleSheet.create({
  vehicleCard: {
    marginTop: px2dp(20),
    backgroundColor: mainBgColorWhite,
    padding: px2dp(20),
    flexDirection: 'row',
  },
  vehicleCardText: {
    marginLeft: px2dp(20),
    height: px2dp(120),
    justifyContent: 'space-between'
  },
  rowItem: {
    flexDirection: 'row',
    backgroundColor: mainBgColorWhite,
    height: px2dp(100),
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0EF'
  }
});
